<!DOCTYPE html>
<html>
<head>
	<title>offset</title>
	<style type="text/css">
		.div1 {
			width: 200px;
			height: 200px;
			background: red;
			margin-left: 200px;
			padding: 10px;
			position: relative;
		}
		.div2 {
			width: 100px;
			height: 100px;
			background: blue;
			margin-left: 50px;
			border: 10px solid yellow;
			position: absolute;
		}		
	</style>
</head>
<body>
<div class="div1">
	<div class="div2"></div>
</div>
<script type="text/javascript">
	
/* offset
	1. 标准流，是相对于浏览器的来进行判断的

	2. 非标准流，是相对于设置了relative的父元素进行判断

	2. 获取盒子的宽高 (width + border + padding)
*/

var div1 = document.getElementsByClassName('div1')[0];
var div2 = document.getElementsByClassName('div2')[0];

console.log(div1.offsetLeft);
console.log(div2.offsetLeft);
console.log(div1.offsetWidth);
console.log(div2.offsetWidth);

// 判断子元素相对于父元素的位置
console.log(div2.offsetLeft - div1.offsetLeft);

</script>
</body>
</html>